<template>
  <div class="gallery" @click="galleryClick">
    <div class="gallery-item">
      <swiper :options="swiperOption" class="swiper">
        <swiper-slide class="swiper-item" v-for="(item,index) in galleryImg" :key="index">
          <img :src="item" alt />
        </swiper-slide>
        <div class="swiper-pagination" slot="pagination"></div>
      </swiper>
    </div>
  </div>
</template>

<script>
export default {
  name: "Gallery",
  data() {
    return {
      swiperOption: {
        pagination: {
          el: ".swiper-pagination",
          type: "fraction"
        },
        // 这两个属性是，当swiper的DOM或其父级DOM发生变化时，重新更新swiper
        observer: true,
        observeParents: true
      }
    };
  },
  props: {
    galleryImg: Array
  },
  methods: {
    galleryClick() {
      this.$emit("hideGallery");
    }
  }
};
</script>

<style lang="stylus" scoped>
.gallery >>> .swiper-pagination
  bottom: -2rem
.gallery >>> .swiper-container
  overflow: visible
.gallery
  position: fixed
  left: 0
  top: 0
  right: 0
  bottom: 0
  background: black
  display: flex
  flex-direction: column
  justify-content: center
  color: white
  z-index: 999
  .gallery-item
    img
      width: 100%
</style>